<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="margin-bj">
			<view class="item" v-for="(item, key) in bankList" :key="item.id" @tap="checkBank(key)">
				<wanl-bank :image="$wanlshop.oss(item.image)"  :bankCode="item.bankCode" :bankName="item.bankName" :cardCode="item.cardCode" />
				<view class="choice text-xl" v-if="choice == 1">
					<text class="wlIcon-xuanze-danxuan" v-if="index == key"></text>
					<text class="wlIcon-xuanze" v-else></text>
				</view>
			</view>
		</view>
		<view class="add margin-bj bg-white flex justify-start align-center" @tap="addBank('add')">
			<text class="iconfont icon-zengjia1"></text>
			<text>添加银行卡</text>
		</view>
		<view v-if="bankList.length == 0">
			<wanl-empty text="没找到任何账户"/>
		</view>
		<view class="edgeInsetBottom"></view>
		<!-- <view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="addBank('add')" class="cu-btn wanl-bg-orange lg">新增新账户</button></view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			bankList: [],
			index: null,
			choice: 0
		};
	},
	onLoad(option) {
		this.choice = option.choice;
		this.loadData();
	},
	methods: {
		async loadData() {
			await uni.request({
				// url: '/wanlshop/pay/getPayAccount',
				url: '/member/banks/lists',
				method: 'POST',
				success: res => {
					this.bankList = res.data;
				}
			});
		},
		async refreshList(data) {
			uni.showLoading({
			    title: '更新中..'
			});
			await uni.request({
				url: '/member/banks/add',
				method: 'POST',
				data: data,
				success: res => {
					this.loadData();
					this.$wanlshop.msg('银行卡添加成功')
					uni.hideLoading();
					this.$store.commit('statistics/dynamic', {
						accountbank: this.$store.state.statistics.dynamic.accountbank + 1
					});
				}
			});
		},
		addBank(type, item) {
			let real_verified = this.$store.state.user.real_verified
			if(!real_verified) {
				this.$wanlshop.msg(`您还未实名认证，请先实名认证`)
				setTimeout(() => {
					this.$wanlshop.auth('/pages/user/setting/verified')
				}, 1500);
			} else {
				if(real_verified == 0) {
					this.$wanlshop.msg('实名认证正在审核中,请耐心等待')
					setTimeout(() => {
						this.$wanlshop.auth('/pages/user/setting/verified')
					}, 1500);
				} else if(real_verified == 1) {
					this.$wanlshop.to(`/pages/user/bank/add?type=${type}&data=${JSON.stringify(item)}`);
				} else if(real_verified == 2) {
					this.$wanlshop.msg(`实名认证未通过,请重新提交`)
					setTimeout(() => {
						this.$wanlshop.auth('/pages/user/setting/verified')
					}, 1500);
				}
			}
		},
		//选择银行卡
		checkBank(key) {
			if(this.choice == 1){
				this.index = key;
				this.$wanlshop.prePage().bankData = this.bankList[key];
				this.$wanlshop.back(1);
			}else{
				//进入银行卡详情 删除/查看
				this.$wanlshop.to(`/pages/user/bank/details?data=${JSON.stringify(this.bankList[key])}`);
			}
		},
	}
};
</script>

<style lang="less">
.item {
	position: relative;
}
.item .choice {
	color: rgba(255, 255, 255, 0.8);
	position: absolute;
	right: 20rpx;
	top: 20rpx;
}
.wanlian.cu-bar.tabbar {
	background-color: transparent;
}
.wanlian.cu-bar.tabbar .cu-btn {
	width: calc(100% - 50rpx);
}
.wanlian.cu-bar.tabbar .cu-btn.lg {
	font-size: 32rpx;
	height: 86rpx;
}
.add {
	width: 690rpx;
	height: 164rpx;
	border-radius: 20rpx;
	padding: 0 32rpx;
	text {
		display: inline-block;
		&:nth-child(1) {
			color: #333333;
			font-size: 40rpx;
			margin-right: 16rpx;
		}
		&:nth-child(2) {
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #333333;
			line-height: 48rpx;
		} 
	}
}
</style>
